<template>
  <d2-container>
    <template slot="header">
      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-position="left" :inline="true">
        <el-form-item label="商户名称：" size="mini">
          <el-input placeholder="" v-model="mainQuery.mchName" @keyup.enter.native="handleSearch" size="small" clearable></el-input>
        </el-form-item>

        <el-form-item label="商户号" size="mini">
          <el-input placeholder="" v-model="mainQuery.mchNo" @keyup.enter.native="handleSearch" size="small" clearable></el-input>
        </el-form-item>

        <el-form-item label="标签" size="mini" prop="">
          <el-select v-model="mainQuery.tagIdList" filterable size="small" multiple clearable>
            <el-option v-for="item in mchTagIdOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>


      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-tooltip :disabled="!!mainTable.current" content="请选择一行数据">
              <el-button class="filter-item" type="default" @click="handleChannelLimitLog" :loading="mainTable.loading" size="mini">通道配置变更日志</el-button>
            </el-tooltip>
            <el-tooltip :disabled="!!mainTable.current" content="请选择一行数据">
              <el-button class="filter-item" type="default" @click="handleLog" :loading="mainTable.loading" size="mini">商户资料变更日志</el-button>
            </el-tooltip>
            <!-- <el-button class="filter-item" icon="el-icon-download" size="mini" @click="handleExportExcel">导出</el-button> -->
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading" size="small">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="small">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud-x ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :rowHandle="mainTable.rowHandle" :loading="mainTable.loading" @current-change="onMainCurrentChange" @row-dblclick="
        (row) => {
          handelInfo({ row: row });
        }
      " @custom-emit-handle-channel-used="handleChannelUsed" @custom-emit-handle-channel-limit="handleChannelLimit" @custom-emit-handle-info="handelInfo" @custom-emit-handle-mchinfo="handelMchInfo"></d2-crud-x>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

    <dialog-add ref="dialog-add" @dialog-close="fetchMainData"></dialog-add>

    <dialog-log ref="dialog-log" @dialog-close="fetchMainData"></dialog-log>
    <dialog-info ref="dialog-info" @dialog-close="fetchMainData"></dialog-info>
    <dialog-channel-used ref="dialog-channel-used" @dialog-close="fetchMainData"></dialog-channel-used>

    <dialog-channel-limit ref="dialog-channel-limit" @dialog-close="fetchMainData"></dialog-channel-limit>

    <dialog-channel-limit-log-list ref="dialog-channel-limit-log-list" @dialog-close="fetchMainData"></dialog-channel-limit-log-list>
    <common-export ref="common-export"></common-export>
  </d2-container>
</template>

<script>

import ApiMain from '@/api/mch.info';
import DialogAdd from './dialog-add';
import DialogChannelUsed from './dialog-channel-used';
import DialogChannelLimit from './dialog-channel-limit';
import DialogChannelLimitLogList from './dialog-channel-limit-log-list';
import DialogLog from './dialog-log';
import DialogInfo from './dialog-info';
import CommonExport from '../../common/export';
import util from '@/libs/util.js';
import text from '@/views/demo/components/editor-simpleMDE/text';
import mchTagApi from '@/api/platform.mchTag';

export default {
  name: 'mch-mch',
  mixins: [
  ],
  components: {
    'dialog-add': DialogAdd,
    'dialog-log': DialogLog,
    'dialog-info': DialogInfo,
    'dialog-channel-used': DialogChannelUsed,
    'dialog-channel-limit': DialogChannelLimit,
    'dialog-channel-limit-log-list': DialogChannelLimitLogList,
    'common-export': CommonExport,
  },
  data() {
    return {

      mainQuery: {
        mchName: undefined,
        mchNo: undefined,
        tagIdList: [],
      },

      mchTagIdOptions: [],

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          // {title: 'id', key: 'id', align: 'center', showOverflowTooltip: true},
          { title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true },
          { title: '商户名称', key: 'mchName', align: 'center', showOverflowTooltip: true },
          { title: '注册状态', key: 'strRegStatus', align: 'center', showOverflowTooltip: true },
          { title: '商户状态', key: 'strStatus', align: 'center', showOverflowTooltip: true },
          { title: 'api开放状态', key: 'strApiStatus', align: 'center', showOverflowTooltip: true },
          { title: '商户后台登录状态', key: 'strLoginStatus', width: 120, align: 'center', showOverflowTooltip: true },
          { title: '资料审核状态', key: 'strEditStatus', align: 'center', showOverflowTooltip: true },
          { title: '创建人', key: 'createBy', align: 'center', showOverflowTooltip: true },
          { title: '创建时间', key: 'createTime', align: 'center', showOverflowTooltip: true },
          // {title: '通道配置', key: 'createTime', align: 'center', showOverflowTooltip: true},
        ],
        rowHandle: {
          width: '350',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '通道使用情况',
              type: 'primary',
              size: 'mini',
              emit: 'custom-emit-handle-channel-used'
            },
            {
              text: (scope) => {
                return scope.row.regStatus == 0 || scope.row.editStatus == 0 ? '审核商户资料' : '查看商户资料'
              },
              type: (scope) => {
                return scope.row.regStatus == 0 || scope.row.editStatus == 0 ? 'warning' : 'primary'
              },
              size: 'mini',
              emit: 'custom-emit-handle-info'
            },
            {
              text: '商户配置',
              type: 'success',
              size: 'mini',
              emit: 'custom-emit-handle-mchinfo'
            }
          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
      },

    }
  },
  async mounted() {
    this.mchTagIdOptions = await mchTagApi.option()
    this.resetMainData();

  },
  beforeDestroy() {
  },
  methods: {
    handelInfo(row) {
      console.log(row)
      this.$router.push({
        path: '/mch/mchInfo', query: {
          id: row.row.id
        }
      })
    },
    renderMainData(re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      console.log(val, '分页')
      this.mainTable.pagination.currentPage = val;
      console.log(this.mainTable.pagination.page)
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
        mchName: undefined,
        mchNo: undefined,
        tagIdList: [],
      };

      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;
      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() {
      this.$refs['dialog-add'].show();
    },

    handleChannelUsed({ index, row }) {
      if (row.regStatus != 1) return this.$message({ message: '该商户没有通过审核！', type: 'warning' });
      this.$refs['dialog-channel-used'].show(row.mchNo);
    },

    handleChannelLimit({ index, row }) {
      this.$refs['dialog-channel-limit'].show(row.mchNo);
    },
    handelMchInfo({ index, row }) {

      if (row.regStatus != 1) return this.$message({ message: '该商户没有通过审核！', type: 'warning' });
      this.$refs['dialog-info'].show(row.id);
    },
    handleSet() {
      if (this.mainTable.current) {
        this.$refs['dialog-add'].show(this.mainTable.current.id);
      }
    },

    handleChannelLimitLog() {
      if (this.mainTable.current) {
        this.$refs['dialog-channel-limit-log-list'].show(this.mainTable.current.mchNo);
      }
    },

    handleLog() {
      if (this.mainTable.current) {
        this.$refs['dialog-log'].show(this.mainTable.current.id);
      }
    },

    handleExportExcel() {
      this.$refs['common-export'].handleExportExcel(ApiMain, this.mainQuery, true);
    },

  }
}
</script>

<style>
</style>
